import React from "react"
import style from "./index.module.scss"
export type CardData = {
    bacColor1: string
    bacColor2: string
    textColor: string
    title: string
    titleIndex: "smart-city" | "smart-light" | "municipal-works"
    desc: string
    imgUrl: string
    tags: string[]
}
type Props = {
    className?: string
    cardData: CardData
}

export default function BusAreaCard(props: Props) {
    const { cardData: { title, desc, tags, titleIndex, bacColor1, bacColor2, textColor }, className } = props
    return (
        <div className={`${style["bus-area-card"]} flex flex-col pb-15 pt-35 relative ${className}`} style={{ backgroundColor: bacColor1 }}>
            <h2 className='font-bold text-5xl text-center' style={{ color: textColor }}>{title}</h2>
            <p className='mt-3.5 mb-5 text-center font-bold' style={{ color: textColor }}>{desc}</p>
            <div className='w-[80%] h-[50px] self-center flex justify-between px-3 items-center rounded-[10px] mb-3 mt-18' style={{ backgroundColor: bacColor2 }}>
                <img src={`/src/assets/home/${titleIndex}-folder.png`} className='w-4' alt="" />
                <img src={`/src/assets/home/${titleIndex}-img.png`} alt="" className='w-30 mb-19' />
                <div className='flex dots'>
                    {
                        Array.from({ length: 3 }, (_, index) => (
                            <div className={`size-1 rounded-[50%] ${index === 1 ? " mx-0.5" : ""}`} style={{ backgroundColor: textColor }} key={index}></div>
                        ))
                    }
                </div>
            </div>
            <div className='tag-box flex flex-wrap content-between justify-between self-center rounded-[10px] p-4 w-[80%] h-[350px]' style={{ backgroundColor: bacColor2 }}>
                {tags.map((tag) => {
                    return <div key={tag} className={`${title === "市政工程" ? "w-[calc(50%-5px)]" : "w-full"} border-1 flex items-center justify-center py-2.5 rounded-[7px] h-[50px] font-bold`} style={{ borderColor: textColor }}>{tag}</div>
                })}
            </div>
            <div className={`${style["bot-line"]} absolute h-[5px] bottom-0 left-0 w-0`} style={{ backgroundColor: textColor }}></div>
        </div>
    )
}
